<template>
    <div>
        <breadCrumb title="角色列表"></breadCrumb>
        <el-card>
            <el-button type="primary" size="medium" style="margin-bottom: 20px;" @click="dialogVisible=true;isEidt=true">添加角色</el-button>

            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column width="50" type="expand">
                  <template v-slot="{row}">
                    <el-row v-for="item in row.children" :key="item.id">
                      <el-col :span="6">
                        <el-tag @close="handleClose(row.id,item.id)" closable>{{ item.authName }}</el-tag>
                        <i class="el-icon-caret-right"></i>
                      </el-col>
                      <el-col :span="18">
                        <el-col :span="24" v-for="item1 in item.children" :key="item1.id">
                          <el-col :span="6">
                            <el-tag @close="handleClose(row.id,item1.id)" closable type="success">{{ item1.authName }}</el-tag>
                            <i class="el-icon-caret-right"></i>
                          </el-col>
                          <el-col :span="12"  style="display: flex;">
                            <el-col v-for="item2 in item1.children" :key="item2.id">
                              <el-tag @close="handleClose(row.id,item2.id)" closable style="display: inline;" type="warning">{{ item2.authName }}</el-tag>
                            </el-col>
                          </el-col>
                        </el-col>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column width="50" label="序号" type="index">
                </el-table-column>
                <el-table-column label="角色名称" width="500">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="角色描述" width="500">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.roleDesc }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)"
                            icon="el-icon-delete">删除</el-button>
                        <el-button size="mini" type="warning" @click="handleTree(scope.row)"
                            icon="el-icon-setting">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- dialog  -->
        <el-dialog :title="isEidt?'添加角色':'编辑角色'" :visible.sync="dialogVisible" width="40%">
            <el-form label-width="100px" :model="formData" ref="ruleForm" :rules="formRole">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="formData.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="formData.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 权限分配 dialog  -->
        <el-dialog width="60%" @close="close" :visible.sync="showDialogTree" title="分配权限">
          <el-tree
          :data="tree"
          node-key="id"
          :props="defaultProps"
           @node-click="handleNodeClick"
           :default-checked-keys="treeNumArr"
           show-checkbox
           default-expand-all
           ref="treeRef"
           >

          </el-tree>
          <div>
            <el-button type="primary" @click="doClick">确认</el-button>
            <el-button @click="showDialogTree=false">取消</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import {
  authority,
  addRoles,
  delRoles,
  editRoles,
  treeList,
  postRolesRights,
  delRoleRights
} from '@/api/role'
export default {
  name: 'ShoppingIndex',

  data () {
    return {
      crrentId: '',
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      showDialogTree: false,
      treeNumArr: [],
      tree: [],
      isEidt: false,
      tableData: [],
      dialogVisible: false,
      formData: {
        roleName: '',
        roleDesc: ''
      },
      formRole: {
        roleName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    this.randerRolesList()
  },

  methods: {
    // tag删除权限点
    async handleClose (oneId, twoId) {
      console.log(oneId, twoId)
      await delRoleRights(oneId, twoId)
      this.randerRolesList()
    },
    async doClick () {
      const rids = this.$refs.treeRef.getCheckedKeys().join(',')
      console.log(rids, 'aaa')
      await postRolesRights(this.crrentId, { rids })
      this.randerRolesList()
      this.close()
    },
    close () {
      this.treeNumArr = []
      this.showDialogTree = false
    },
    // 获取权限标识符方法
    async handleTree (row) {
      this.crrentId = row.id
      const res = await treeList()
      this.tree = res.data
      console.log(this.tree, 'tree')
      this.getLeafKeys(row, this.treeNumArr)
      this.showDialogTree = true
    },
    getLeafKeys (node, arr) {
      if (!node.children) {
        return arr.push(node.id)
      } else {
        node.children.forEach(item => this.getLeafKeys(item, arr))
      }
    },
    handleNodeClick () {

    },
    submitForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.isEidt ? this.addRole() : this.editRole()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 添加
    async addRole () {
      await addRoles(this.formData)
      this.dialogVisible = false
      this.randerRolesList()
    },
    async editRole () {
      await editRoles(this.formData)
      this.dialogVisible = false
      this.randerRolesList()
    },
    handleEdit (row) {
      this.isEidt = false
      this.dialogVisible = true
      this.formData = { ...row }
    },
    handleDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delRoles(id)
        this.randerRolesList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async randerRolesList () {
      const res = await authority()
      console.log(res.data, 'data----------')
      this.tableData = res.data
    }
  }
}
</script>

<style lang="scss" scoped></style>
